<template>
  <el-dialog v-model="visible"  :width="'30%'" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false"
             :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()"
             label-width="120px">
      <el-row :gutter="22">
        <el-col :span="22">
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="请输入项目名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="22">
                <el-form-item label="施工日期" prop="startdata">
                  <el-row :gutter="22">
                    <el-col :span="9">
                      <el-date-picker style="width: 100%"
                        v-model="dataForm.startDateStr"
                        type="date"
                        placeholder="选择日期" value-format="YYYY-MM-DD">
                      </el-date-picker>
                    </el-col>
                    <el-col :span="1">
                      -
                    </el-col>
                    <el-col :span="9">
                      <el-date-picker style="width: 100%"
                        v-model="dataForm.endDateStr"
                        type="date"
                        placeholder="选择日期" value-format="YYYY-MM-DD">
                      </el-date-picker>
                    </el-col>
                  </el-row>
                </el-form-item>
            <div class="block">
            </div>
        </el-col>
      </el-row>
      <el-row :gutter="22">
        <el-col :span="22">
          <el-form-item label="所属区域" prop="provinceId">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-select  filterable v-model="dataForm.provinceId" clearable @change="provinceChange" placeholder="请选择省"><!---->
                  <el-option v-for="item in dataForm.provinceOP"  :key="item.id"  :label="item.name" :value="item.id" @click="provinceOPCl(item.name)"></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-select filterable v-model="dataForm.cityId"  clearable @change="cityChange" placeholder="请选择市"><!--"-->
                  <el-option v-for="item in dataForm.provOp"  :key="item.id" :label="item.name" :value="item.id" @click="cityOPCl(item.name)" > </el-option>
                </el-select></el-col>
              <el-col :span="8">
                <el-select  v-model="dataForm.creaId" clearable placeholder="请选择区县">
                  <el-option v-for="item in dataForm.creaOp"  :key="item.id" :label="item.name" :value="item.id" @click="creaOpOPCl(item.name)"> </el-option>
                </el-select></el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="22">
        <el-col :span="22">
          <el-form-item label="项目描述" prop="notes">
            <el-input
              resize="vertical"
              size="100"
              type="textarea"
              placeholder="请输入项目描述"
              v-model="dataForm.notes"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import {IObject} from "@/types/interface";

const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();

const dataForm = reactive({
  id: '',
  name: '',
  provinceName: '',
  provinceId: '',
  cityName: '',
  cityId: '',
  creaName: '',
  creaId: '',
  projectHead: '',
  projectMember: '',
  createDate: '',
  state: '',
  notes: '',
  provinceOP:[],
  provOp:[],
  creaOp:[],
  startDateStr:"",
  endDateStr:"",
  provinceURL: "/sysproject/address/getLevel",
  cityURL: "/sysproject/address/getParentId",
});
const validateConfirmDate = (rule: IObject, value: string, callback: (e?: Error) => any) => {
  if (!dataForm.startDateStr ) {
    return callback(new Error("请选择施工开始日期"));
  }
  if (!dataForm.endDateStr ) {
    return callback(new Error("请选择施工结束日期"));
  }
  callback();
};
const validateConfirmQy = (rule: IObject, value: string, callback: (e?: Error) => any) => {
  if (!dataForm.provinceId ) {
    return callback(new Error("请选择省市区"));
  }
  if (!dataForm.cityId ) {
    return callback(new Error("请选择市"));
  }
  if (!dataForm.creaId ) {
    return callback(new Error("请选择区"));
  }
  callback();
};
const rules = ref({
  name: [
    {required: true, message: '必填项不能为空', trigger: 'blur'}
  ],
  provinceId: [
    {validator: validateConfirmQy, trigger: 'blur'}
  ],
  startdata: [
    {validator: validateConfirmDate, trigger: 'blur'}
  ],
  notes: [
    {required: true, message: '必填项不能为空', trigger: 'blur'}
  ]
});

const init = (id?: number) => {
  dataForm.id = "";
  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields();
  }
  baseService.post(dataForm.provinceURL,{"level":"1"}).then((res) => {
    dataForm.provinceOP =res.data
  });
  if (id) {
    getInfo(id);
  }
  visible.value = true;

};

const provinceChange = (item?: string)=>{
  debugger
  if(!item){
    dataForm.creaOp =[];
    dataForm.provOp =[];
    dataForm.cityId ="";
    dataForm.creaId ="";
    return
  }
  if(!dataForm.id){
    dataForm.creaOp =[];
    dataForm.provOp =[];
    dataForm.cityId ="";
    dataForm.creaId ="";
  }
  baseService.post(dataForm.cityURL,{"id":item?item:""}).then((res) => {
    debugger;
    dataForm.provOp = res.data;
  });
};
const cityChange = (item?: string)=>{
  if(!item){
    dataForm.creaId ="";
    dataForm.creaOp =[];
    return
  }
  baseService.post(dataForm.cityURL,{"id":item?item:""}).then((res) => {
    Object.assign(dataForm.creaOp, res.data);
    if(!dataForm.id){
      dataForm.creaId ="";
    }
  });
};

const provinceOPCl = (item?: string)=>{
  dataForm.provinceName =item;
  console.log(item)
};
const cityOPCl = (item?: string)=>{
  dataForm.cityName =item;
  console.log(item)
};
const creaOpOPCl = (item?: string)=>{
  dataForm.creaName =item;
  console.log(item)
};
// 获取信息
const getInfo = (id: number) => {
  baseService.get("/sysproject/project/" + id).then((res) => {
    debugger
    Object.assign(dataForm, res.data);
    dataForm.startDateStr =res.data.startDate
    dataForm.endDateStr =res.data.endDate
    debugger;
    provinceChange(dataForm.provinceId);
    cityChange(dataForm.cityId)
  });
};

// 表单提交
const dataFormSubmitHandle = () => {
  debugger
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false;
    }
    (!dataForm.id ? baseService.post : baseService.put)("/sysproject/project", dataForm).then((res) => {
      ElMessage.success({
        message: '成功',
        duration: 500,
        onClose: () => {
          visible.value = false;
          emit("refreshDataList");
        }
      });
    });
  });
};

defineExpose({
  init
});
</script>
